<template>
	<view class="entire">
		<view class="card">
			<view style="width: 100%;height: 30rpx;"></view>
			<view class="card_user">
				<view class="cu-avatar lg round" :style="{ 'background-image': 'url(' + userinfo.avatar + ')' }">
				</view>
				<text
					style="font-size: 45rpx;color: #fff;padding-left: 25rpx;padding-right: 30rpx;">{{userinfo.nickname}}</text>
				<image style="width: 38rpx;height: 38rpx;" src="../../static/V.png" v-if="userinfo.is_period_of_validity == 1"></image>
				<image style="width: 38rpx;height: 38rpx;" src="../../static/huiv.png" v-else></image>
			</view>
			<view style="width: 90%;">
				<view style="padding-top:30rpx;padding-left:50rpx;color:#fff;">联系方式: {{userinfo.mobile}}</view>
				<view style="padding-top:15rpx;padding-left:50rpx;color:#fff;">就职单位: {{userinfo.employer}}</view>
				<view style="padding-top:15rpx;padding-left:50rpx;color:#fff;">职位: {{userinfo.position}}</view>
				<view style="padding-top:15rpx;padding-left:50rpx;color:#fff;">邀请码: {{userinfo.invitation_code}}</view>
				<view style="padding-top:15rpx;padding-bottom:20rpx;padding-left:50rpx;color:#fff;">到期时间:
					{{userinfo.period_of_validity}}<text v-if="userinfo.is_period_of_validity == 0">(已到期)</text>
				</view>
			</view>
			<view style="font-size: 42rpx;color: #FFCC00;position: absolute;right: 70rpx;top: 76%;"
				@click="membership()">
				点击续费
			</view>
		</view>

		<view class="count" style="display: flex;justify-content: center;align-items: center;">
			<view style="width: 20%;color: #fff;">
				<view style="text-align: center;font-size: 60rpx;">
					{{userinfo.count_list ? userinfo.count_list.post_count : 0}}</view>
				<view style="text-align: center;font-size: 30rpx;">发帖数</view>
			</view>
			<view style="width: 20%;color: #fff;">
				<view style="text-align: center;font-size: 60rpx;">
					{{userinfo.count_list.total_views == "" ? 0 : userinfo.count_list.total_views}}</view>
				<view style="text-align: center;font-size: 30rpx;">总浏览量</view>
			</view>
			<view style="width: 20%;color: #fff;">
				<view style="text-align: center;font-size: 60rpx;">
					{{userinfo.count_list.comment_count == "" ? 0 : userinfo.count_list.comment_count}}</view>
				<view style="text-align: center;font-size: 30rpx;">评论数</view>
			</view>
			<view style="width: 20%;color: #fff;">
				<view style="text-align: center;font-size: 60rpx;">
					{{userinfo.count_list.favorite_count == "" ? 0 : userinfo.count_list.favorite_count}}</view>
				<view style="text-align: center;font-size: 30rpx;">收藏数</view>
			</view>
			<view style="width: 20%;color: #fff;">
				<view style="text-align: center;font-size: 60rpx;">{{userinfo.count_list.my_favorites_count}}</view>
				<view style="text-align: center;font-size: 30rpx;">我的收藏</view>
			</view>
		</view>

		<view class="Publishing">
			<scroll-view scroll-x class="bg-Midnight-Blue nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="index==TabCur?'text-cyan cur':'text-white'"
					v-for="(item,index) in navigation" @click="video_info(item)" :key="index" @tap="tabSelect"
					:data-id="index">
					{{item}}
				</view>
			</scroll-view>

			<view style="width: 90%;margin: 30rpx auto;" v-if="album_labels == 1">
				<view v-for="(item,index) in myPost.list" :key="index" style="position:relative;">
					<view class="title1" @click="postinfo(item.id)">
						{{item.title}}
					</view>
					
					
					<view style="display: flex;padding: 25rpx 20rpx 0 0;position: absolute;right: 10px;top:0;">
					<!-- 	<view style="font-size: 25rpx;color:#fff;padding-right: 20rpx;" @click="deletePost(item)">删除</view>
						<view style="font-size: 25rpx;color:#fff;" @click="updatePost(item)">修改</view> -->
						<view @click="showActionSheet(item)">
							<image src="../../static/dian.png" style="width: 30rpx;height: 30rpx;"></image>
						</view>
					</view>
					
					<view class="content1"
						style="max-height: 130rpx;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;"
						@click="postinfo(item.id)">
						<rich-text class="rich-text"
							style="width: 98%;font-size: 36rpx;color: white;font-size: 30rpx;color:#ccc;"
							:nodes="item.content"></rich-text>
					</view>
					<view
						style="color: #86A1C1;padding-top: 25rpx;padding-bottom: 20rpx;display: flex;justify-content: space-between;align-items: center;">
						<text>{{item.block_text}}</text>
						<text>{{item.create_time}}</text>
					</view>
				</view>
			</view>
			<view style="width: 90%;margin: 30rpx auto;" v-if="album_labels == 2">
				<view v-for="(item,index) in MyFavorite.video_list" :key="index">
					<view class="title1">
						{{item.title}}
					</view>
					<view class="content1"
						style="max-height: 130rpx;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">
						<rich-text class="rich-text"
							style="width: 98%;font-size: 36rpx;color: white;font-size: 30rpx;color:#ccc;"
							:nodes="item.description"></rich-text>
					</view>
					<view
						style="color: #86A1C1;padding-top: 25rpx;padding-bottom: 20rpx;display: flex;justify-content: space-between;align-items: center;">
						<text>{{item.create_time}}</text>
					</view>
				</view>
				<view v-for="(item,index) in MyFavorite1.plate_post_list" :key="index">
					<view class="title1" @click="postinfo(item.id)">
						{{item.title}}
					</view>
					<view class="content1"
						style="max-height: 130rpx;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;"
						@click="postinfo(item.id)">
						<rich-text class="rich-text"
							style="width: 98%;font-size: 36rpx;color: white;font-size: 30rpx;color:#ccc;"
							:nodes="item.content"></rich-text>
					</view>
					<view
						style="color: #86A1C1;padding-top: 25rpx;padding-bottom: 20rpx;display: flex;justify-content: space-between;align-items: center;">
						<text>{{item.create_time}}</text>
					</view>
				</view>
			</view>

			<view style="width: 90%;margin: 30rpx auto;" v-if="album_labels == 3">
				<view v-for="(item,index) in Mypost.list" :key="index">
					<view class="title1" @click="postinfo(item.id)">
						{{item.post_title}}
					</view>
					<view class="content1"
						style="max-height: 130rpx;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;"
						@click="postinfo(item.id)">
						<rich-text class="rich-text"
							style="width: 98%;font-size: 36rpx;color: white;font-size: 30rpx;color:#ccc;"
							:nodes="item.content"></rich-text>
					</view>
					<view
						style="color: #86A1C1;padding-top: 25rpx;padding-bottom: 20rpx;display: flex;justify-content: space-between;align-items: center;">
						<text>{{item.create_time}}</text>
					</view>
				</view>
			</view>

			<!-- <view style="width: 90%;margin: 30rpx auto;" v-if="album_labels == 4">
				<view v-for="(item,index) in MyFavorite.list" :key="index">
					<view class="title1">
						{{item.title}}
					</view>
					<view class="content1"
						style="max-height: 130rpx;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">						
						<rich-text class="rich-text" style="width: 98%;font-size: 36rpx;color: white;font-size: 30rpx;color:#ccc;"
							:nodes="item.content"></rich-text>
					</view>
					<view style="color: #86A1C1;padding-top: 25rpx;padding-bottom: 20rpx;display: flex;justify-content: space-between;align-items: center;">
						<text>{{item.create_time}}</text>
					</view>
				</view>
			</view> -->


		</view>

		<view class="count" style="height: 650rpx;">
			<view style="color: #1EEBE6;font-size: 35rpx;font-weight: 600;padding: 50rpx 0 50rpx 40rpx;">
				现有积分: {{integral.score_sum}}分
			</view>
			<view class="integral_block">
				<view class="single_strip" v-for="(item, index) in integral.score_list" :key="index">
					<text class="date">{{item.change_time}} {{item.change_type_text}}</text>
					<text class="number" style="color: #61F637;" v-if="item.seq_flag == 1">+{{item.change_num}}</text>
					<text class="number" style="color: #F7D600;" v-if="item.seq_flag == 2">-{{item.change_num}}</text>
				</view>
			</view>
			<view class="Points_button" @tap="showModal" data-target="menuModal">
				点击查看积分规则
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='menuModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop>
				<view class="cu-list menu text-left solid-top">
					<view style="padding: 20rpx 0 30rpx 30rpx;font-size: 40rpx;font-weight: 600;">查看积分规则</view>
					<view style="padding: 20rpx 0 30rpx 30rpx;">
						<rich-text :nodes="richTextContent"></rich-text>
					</view>
				</view>
			</view>
		</view>

		<view class="Information" @click="edituser">修改个人信息</view>
		<view class="Information" @click="exit">退出</view>
		<view style="width: 100%;height: 100rpx;"></view>
		
		<fui-actionsheet :show="show_dian" :tips="tips" :itemList="itemList" :isCancel="isCancel" :theme="theme"
			@click="itemClick" @cancel="cancel_dian" maskClosable='true'></fui-actionsheet>
	</view>
</template>

<script>
	import user from '@/api/user.js';
	import forum from '@/api/forum.js';
	export default {
		data() {
			return {
				token: '',
				TabCur: 0,
				scrollLeft: 0,
				navigation: ['我的帖子', '点赞/收藏', '评论列表'],
				album_labels: 1,
				userinfo: [],
				integral: [],
				modalName: null,
				richTextContent: '',
				Config: [],
				myPost: [],
				MyFavorite: [],
				MyFavorite1: [],
				Mypost: [],
				show_dian: false,
				tips: '',
				itemList: [],
				isCancel: true,
				theme: 'light',
				array_item: [],
			}
		},
		onLoad() {
			const token = uni.getStorageSync('token');
			this.token = token
			if (token == '') {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			this.fetchData()
		},
		methods: {
			showActionSheet(item) {
				this.array_item = item
				this.tips = '';
				this.isCancel = true;
				this.theme = 'light';
				this.itemList = ['删除', '修改']
				setTimeout(() => {
					this.show_dian = true
				}, 50)
			},
			itemClick(e) {
				if (e.index == 0) {
					this.deletePost(this.array_item)
				} else if (e.index == 1) {
					this.updatePost(this.array_item)
				} else {
					this.cancel_dian()
				}
			},
			cancel_dian() {
				this.show_dian = false
			},
			drop_down() {
				this.TabCur = uni.getStorageSync('TabCur');
				this.infoList(uni.getStorageSync('fid'))
			},
			deletePost(item) {
				uni.showModal({
					title: '',
					content: '确定要删除吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							forum.delPost({
								category_type: item.category_type,
								id: item.id
							}).then(res => {
								if (res.code === 1) {
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									})
									this.cancel_dian()
									this.fetchData()
								}
							})
						}
					}
				})
			},
			updatePost(item) {
				console.log(item)
				uni.redirectTo({
					url: '/pages/index/updatePost'
				});
				uni.setStorageSync('arrayList', item);
			},
			fetchData() {
				user.getUserDetails({
					token: this.token
				}).then(res => {
					this.userinfo = res.data
				});
				user.getScoreList({
					token: this.token
				}).then(res => {
					this.integral = res.data
				});
				user.getWebConfig().then(res => {
					this.Config = res.data
					this.richTextContent = res.data.web_score_rule
				});
				user.getMyPlazaPostList().then(res => {
					this.myPost = res.data
				});
				user.getMyFavorite({
					table_name: 'video'
				}).then(res => {
					this.MyFavorite = res.data
				});
			},
			onPullDownRefresh() {
				this.fetchData()
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			video_info(val) {
				if (val == '我的帖子') {
					this.album_labels = 1
				} else if (val == '点赞/收藏') {
					this.album_labels = 2
					user.getMyFavorite({
						table_name: 'video'
					}).then(res => {
						this.MyFavorite = res.data
					});
					user.getMyFavorite({
						table_name: 'plate_post'
					}).then(res => {
						this.MyFavorite1 = res.data
					});
				} else if (val == '评论列表') {
					this.album_labels = 3
					user.getMyCommentedArticles({
						page: 1,
					}).then(res => {
						this.Mypost = res.data
					})
				} else if (val == '广场收藏') {
					this.album_labels = 4
					user.getMyFavorite({
						table_name: 'plaza_post'
					}).then(res => {
						this.MyFavorite = res.data
					});
				}
				console.log(this.album_labels)
			},
			exit() {
				uni.removeStorageSync('token');
				uni.removeStorageSync('fidWen')
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			edituser() {
				uni.setStorageSync('type', 2);
				uni.navigateTo({
					url: '/pages/login/perfect'
				})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			membership() {
				uni.setStorageSync('fid', this.fids);
				uni.setStorageSync('fid_type', 'vip');
				uni.navigateTo({
					url: '/pages/membership/membership'
				})
			},
			//帖子详情
			postinfo(id) {
				uni.navigateTo({
					url: '/pages/bondmarket/postinfo?id=' + id + '&fid=' + this.fid
				})
			}
		}
	}
</script>

<style>
	.entire {
		width: 100%;
		/* height: 100vh; */
		background-color: #112858;
	}

	.card {
		width: 92%;
		background: linear-gradient(to right, #5992E7, #3463A9);
		margin: auto;
		border-radius: 16rpx;
		position: relative;
	}

	.card_user {
		width: 90%;
		height: 120rpx;
		border-bottom: 8rpx #A6C9FF solid;
		margin: auto;
		display: flex;
		justify-content: left;
		align-items: flex-end;
		padding-bottom: 20rpx;
	}

	.count {
		width: 92%;
		height: 190rpx;
		background: #0D4283;
		margin: auto;
		border-radius: 16rpx;
		margin-top: 50rpx;
	}

	.Publishing {
		width: 92%;
		background: #0D4283;
		margin: auto;
		border-radius: 16rpx;
		margin-top: 50rpx;
	}

	.title1 {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #fff;
		font-size: 35rpx;
		padding-bottom: 30rpx;
	}

	.content1 {
		overflow: hidden;
		text-overflow: ellipsis;
		color: #86A1C1;
		font-size: 28rpx;
	}

	.integral_block {
		width: 90%;
		height: 340rpx;
		margin: auto;
		overflow: auto;
	}

	.single_strip {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.date {
		color: #fff;
		font-size: 32rpx;
	}

	.number {
		font-size: 32rpx;
		font-weight: 600;
	}

	.Points_button {
		color: #fff;
		font-size: 38rpx;
		font-weight: 600;
		width: 70%;
		height: 100rpx;
		background-color: #1571ED;
		border-radius: 16rpx;
		text-align: center;
		line-height: 100rpx;
		margin: 20rpx auto;
	}

	.Information {
		width: 92%;
		height: 120rpx;
		background-color: #2C487A;
		border-radius: 16rpx;
		border: 4rpx #638CC2 solid;
		color: #fff;
		font-size: 38rpx;
		text-align: center;
		line-height: 120rpx;
		margin: 20rpx auto 10rpx;
	}
</style>